<template>
  <div class="demo-conbogrid">
    <span> 选中的值 {{ state.value }} 显示的值 {{ state.label }}</span>
    <ClientOnly>
      <v-combogrid
        v-model="state.value"
        v-model:inputlabel="state.label"
        :grid-data="state.tableData"
        :width="'400'"
        :height="'300'"
        :columns="[
          { field: 'label', title: 'Name' },
          { field: 'value', title: 'value' },
        ]"
      />
    </ClientOnly>
  </div>
</template>

<script setup>
  import { reactive } from 'vue'
  const state = reactive({
    value: '',
    label: '',
    tableData: new Array(30).fill(30).map((it, index) => {
      return { value: `value ${index}`, label: `label ${index}` }
    }),
  })

  console.log(`output->state.tab`, state.tableData)
</script>

<style lang="scss" scoped>
  .demo-conbogrid {
    :deep(.el-input) {
      width: 350px;
    }
  }
</style>
